<template>
  <div class="p-6">
    <el-tabs v-model="tabIndex" class="demo-tabs" @tab-click="handleClick">
      <el-tab-pane label="小键盘设置" :name="1">
        <keypad />
      </el-tab-pane>
      <el-tab-pane label="功能键设置" :name="2"> <function-key /></el-tab-pane>
      <el-tab-pane label="方向键设置" :name="3">
        <direction-key />
      </el-tab-pane>
    </el-tabs>
  </div>
</template>
<script setup lang="ts">
import { ref } from "vue";
import Keypad from "./components/keypad.vue";
import DirectionKey from "./components/directionKey.vue";
import FunctionKey from "./components/functionKey.vue";

const tabIndex = ref(1);

const handleClick = (v) => {
  tabIndex.value = v;
};
</script>
<style lang="scss" scoped>
// ::v-deep(.el-tabs__item.is-active) {
//   color: #ffd04b !important;
// }
// ::v-deep(.el-tabs__active-bar) {
//   background-color: #ffd04b !important;
// }
// ::v-deep(.el-tabs__item) {
//   color: #fff !important;
// }
</style>
